<template>
  <div>
    <div class="dy-header">
      <van-icon name="arrow-left" @click="back" />
      <div class="dy-inp">
        <input type="text" placeholder="请输入内容" v-model="dy_text"/>
      </div>
      <p @click="enter()">搜索</p>
    </div>

    <div class="dy-history">
      <div class="dy-clear" v-show="dy_flag">
        <h3>
          历史记录
          <van-icon name="delete" @click="clear()" size="20" />
        </h3>
        <ul>
          <li v-for="(item,index) in dy_history" :key="index">{{item}}</li>
        </ul>
      </div>

      <div class="dy-content" v-show="!dy_flag">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell>
            <ul class="dy-ul">
              <li v-for="(item,index) in ask" :key="index">
                <p class="dy-p">{{item.title}}</p>
                <div class="dy-div">
                  <img src="../../assets/nz.png" alt class="dy-i" />
                  <p>{{item.start_play_date}}~{{item.end_play_date}}</p>|
                  <p>共{{item.course_type}}课时</p>
                </div>
                <div class="dy-div1" v-for="(it,ind) in item.teachers_list" :key="ind">
                  <img :src="it.teacher_avatar" alt />
                  <p>{{it.teacher_name}}</p>
                </div>
                <div class="dy-div2">
                  <p>{{item.browse_num}}人已报名</p>
                  <p>免费</p>
                </div>
              </li>
            </ul>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { Course } from "../../request/http";
export default {
  name: "",
  data() {
    return {
      dy_List: [],
      dy_flag: true,
      dy_text: "",
      dy_history: [],
      loading: false,
      finished: false,
    };
  },
  props: [],
  computed: {
    ask() {
      if (this.dy_text == "") {
        this.dy_flag = true;
        return [];
      }
      this.dy_flag = false;
      return this.dy_List.filter(item => {
        return item.title.indexOf(this.dy_text) > -1;
      });
    }
  },
  components: {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // Course().then(res => {
      //   console.log(res.list);
      //   this.dy_List = res.list;
      // });
       this.$axios({
        url:'https://www.365msmk.com/api/app/courseBasis'
      }).then(res=>{
        console.log(res)
        this.dy_List=res.data.data.list
      })
    },
    back() {
      this.$router.go(-1);
    },
    get() {
      let dy_data = localStorage.getItem("lm_history", true);
      this.dy_history = dy_data == null ? [] : data;
    },
    enter() {
      //   console.log(this.dy_text)
      if (this.dy_text == "") {
        return false;
      }

      this.dy_history.unshift(this.dy_text);

      if (this.dy_history.length > 8) {
        this.dy_history.pop();
      }
      localStorage.setItem("lm_history", this.dy_history, true);

      this.dy_text = "";
    },
    clear() {
      localStorage.removeItem("lm_history");
      this.get();
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          this.dy_List.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.dy_List.length >= 4) {
          this.finished = true;
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.dy-header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  padding: 0 10px;
}
.dy-header>.van-icon{
    font-size: 20px;
}
.dy-header > .dy-inp {
  width: 300px;
  text-align: center;
}
.dy-header > .dy-inp > input {
  height: 0.8rem;
  height: 8vw;
  padding-left: 0.74667rem;
  padding-left: 7.46667vw;
  border: none;
  background: #e4e7ed;
  border-radius: 0.4rem;
  border-radius: 4vw;
  font-size: 0.4rem;
  font-size: 4vw;
  width: 86%;
}
.dy-history {
  background: #fff;
  height: 600px;
}
.dy-clear > h3 {
  padding: 10px;
}
.dy-clear > h3 > .van-icon {
  float: right;
}
.dy-clear > ul {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}
.dy-clear > ul > li {
  width: 15%;
  background: #eee;
  text-align: center;
  line-height: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 20px;
}
.dy-content {
  margin-top: 11px;
}
.dy-ul > li {
  width: 100%;
  margin-top: 16px;
  margin-left: 8px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
}
.dy-ul > li > .dy-p {
  font-size: 17px;
}
.dy-ul > li > .dy-div {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.dy-ul > li > .dy-div > img {
  width: 15px;
  height: 15px;
}
.dy-ul > li > .dy-div > p {
  margin-left: 5px;
}
.dy-ul > li > .dy-div > p:nth-of-type(1) {
  margin-right: 10px;
}
.van-cell {
  background: #f0f0f0;
}
.dy-ul > li > .dy-div1 {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.dy-ul > li > .dy-div1 > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.dy-ul > li > .dy-div1 > p {
  color: rgba(0, 0, 0, 0.45);
  margin-left: 10px;
  font-size: 12px;
}
.dy-ul > li > .dy-div2 {
  display: flex;
  border-top: 1px solid #f0f0f0;
  padding: 5px 0;
}
.dy-ul > li > .dy-div2 > p {
  margin-top: 5px;
}
.dy-ul > li > .dy-div2 > p:nth-of-type(1) {
  width: 280px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 13px;
}
.dy-ul > li > .dy-div2 > p:nth-of-type(2) {
  font-size: 16px;
  color: #44a426;
}
</style>